<template>
	<view class="container">
		<!-- <camera class="camera">
			<cover-view class="inner">
				<cover-image class="pic" src="/static/my/bank.png"></cover-image>
			</cover-view>
		</camera> -->
		<camera v-if="isShowCamera" class="camera-box" devic-position="width" flash="off"
			:style="{width:windowWidth+'px',height:windowHeight+'px'}">
			<cover-view class='camerabgImage'>
				<cover-view class="active">
					<cover-image class="active-image" :src="imgMask"></cover-image>
					<cover-view class="text">
						{{ 
							type == 0 ? '请将人像面放入框中，点击拍照进行识别' :
								type == 1 ? '请将国徽面放入框中，点击拍照进行识别' : 
								 type == 2 ? '请将银行卡放入框中，点击拍照进行识别' : ''
						}}
					</cover-view>
					<cover-view class="btn" @click="takePhotoAction">
						<cover-view class="button"></cover-view>
					</cover-view>

				</cover-view>
			</cover-view>
		</camera>
		
		<canvas v-if='isShowImage' canvas-id="image-canvas"
			:style="{width:windowWidth+'px',height:windowHeight+'px'}"></canvas>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowCamera: false,
				isShowImage: true,
				image: '',
				windowWidth: '',
				windowHeight: '',
				imgMask:'',
				type:'',
			}
		},
		onLoad(options) {
			this.type = options.type;
			if(this.type == 2){
				this.imgMask = '/static/my/bank.png'
			}else if(this.type== 0){
				this.imgMask = '/static/my/idcard-front.png'
			}else {
				this.imgMask = '/static/my/idcard-back.png'
			}
			this.ctx = wx.createCameraContext()
			let {
				windowWidth,
				windowHeight
			} = wx.getSystemInfoSync()
			this.windowWidth = windowWidth;
			this.windowHeight = windowHeight;
		},
		onShow() {
			wx.authorize({
				scope: 'scope.camera',
				success: (res) => {
					this.isShowCamera = true;
				},
				fail: (res) => {
					console.log("" + res);
					wx.showModal({
						title: '请求授权您的摄像头',
						content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								wx.openSetting({
									success: (res) => {
										console.log('成功');
										console.log(res);
										if (res.authSetting['scope.camera']) { //设置允许获取摄像头
											console.log('设置允许获取摄像头')
											wx.showToast({
												title: '授权成功',
												icon: 'success',
												duration: 1000
											})
											this.isShowCamera = true
										} else { //不允许
											wx.showToast({
												title: '授权失败',
												icon: 'none',
												duration: 1000
											})
											wx.navigateBack({
												delta: 1
											})
										}
									}
								})
							} else { //取消
								wx.showToast({
									title: '授权失败',
									icon: 'none',
									duration: 1000
								})
								wx.navigateBack({
									delta: 1
								})

							}
						}
					})

				}
			})
		},
		methods: {
			takePhotoAction() {
				this.ctx.takePhoto({
					quality: 'high', //高质量
					success: (res) => {
						this.loadTempImagePath(res.tempImagePath);
					},
					fail(error) {
						console.log(error)
					}
				})
			},
			loadTempImagePath(options) {
				var that = this;
				wx.getSystemInfo({
					success: (res) => {
						// px与rpx之间转换的公式：px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
						// 矩形的位置
						// var image_x = 0;
						// var image_y = 0;
						// var image_width = that.data.windowWidth;
						// var image_height = that.data.windowHeight
						var image_x = 36 / 750 * wx.getSystemInfoSync().windowWidth;
						var image_y = 245 / 750 * wx.getSystemInfoSync().windowWidth;
						var image_width = 680 / 750 * wx.getSystemInfoSync().windowWidth;
						var image_height = 435 / 750 * wx.getSystemInfoSync().windowWidth;
						console.log(image_x, image_y, image_width, image_height)
						wx.getImageInfo({
							src: options,
							success: (res) => {
								this.isShowImage = true;
								this.canvas = wx.createCanvasContext("image-canvas", this);
								//过渡页面中，图片的路径坐标和大小
								this.canvas.drawImage(options, 0, 0, this.windowWidth, this.windowHeight)
								wx.showLoading({
									title: '数据处理中...',
									icon: 'loading',
									duration: 10000
								})
								this.canvas.setStrokeStyle('black')
								this.canvas.strokeRect(image_x, image_y, image_width, image_height)
								this.canvas.draw();
								setTimeout(() => {
									wx.canvasToTempFilePath({
										canvasId: 'image-canvas',
										x: image_x, //画布x轴起点
										y: image_y, //画布y轴起点
										width: image_width, //画布宽度
										height: image_height, //画布高度
										destWidth: image_width, //输出图片宽度
										destHeight: image_height, //输出图片高度
										success: (res) => {
											this.image = res.tempFilePath;
											//清除画布上在该矩形区域内的内容。
											// that.canvas.clearRect(0, 0, that.data.width, that.data.height)
											// that.canvas.drawImage(res.tempFilePath, image_x, image_y, image_width, image_height)
											// that.canvas.draw()
											wx.hideLoading()
											if(this.type == 0){
												uni.redirectTo({
													url:`/pages/RealName/RealName?tempPath=${res.tempFilePath}&type=0`
												})
											}else if(this.type == 1){
												uni.redirectTo({
													url:`/pages/RealName/RealName?tempPath=${res.tempFilePath}&type=1`
												})
											}else {
												uni.redirectTo({
													url:`/pages/bankCard/index?tempPath=${res.tempFilePath}&type=2`
												})
											}
										},
										fail: (e) => {
											wx.hideLoading()
											wx.showToast({
												title: '出错啦...',
												icon: 'loading'
											})
										}
									});
								}, 400)
							}
						})
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.camera-box {
		width: 100vw;
		height: 100vh
	}

	.camera-box .camerabgImage {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0
	}

	.camera-box .camerabgImage .active {
		position: absolute;
		top: 245rpx;
		left: 36rpx;
		right: 36rpx
	}

	.camera-box .camerabgImage .active-image {
		display: block;
		width: 680rpx;
		height: 435rpx
	}

	.camera-box .camerabgImage .text {
		text-align: center;
		margin-top: 56rpx;
		margin-bottom: 240rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #D9D9D9;
		line-height: 40rpx
	}

	.camera-box .camerabgImage .btn {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background: #fff;
		border: 6rpx solid#fff;
		margin: 0 auto
	}

	.camera-box .camerabgImage .btn .button {
		width: 102rpx;
		height: 102rpx;
		border-radius: 50%;
		border: 4rpx solid#000
	}
</style>